{template "contest","header"}
		<!--top幻灯片end-->	
		
		<div class="contentBox">
			<section class="topsite">
				<p>当前位置:<a href="/">首页</a>{if $parentInfo}<span>></span><a href="/index.php?m=contest&c=index&a=imagelist&catid={$parentInfo['catid']}">{$parentInfo['catname']}</a>{/if}{if $catInfo}<span>></span>{$catInfo[catname]}{/if}</p>
			</section>		
			<section class="newsTitle">
				<h2>{$picture[title]}</h2>
				<p><span>时间:{$picture[update_time]}</span></p>
			</section>
				<!--轮播内容页面开始-->				
				<div class="centerMian　pdt5">
				<!-- 模特介绍 幻灯轮播结束 -->
				<div class="mote1">
					<!-- 图片轮播代码 开始 -->
					<div class="mod18Box">
						<div class="mod18">
							<span id="prev" class="btn prev"></span>
							<span id="next" class="btn next"></span>
							<span id="prevTop" class="btn prev"></span>
							<span id="nextTop" class="btn next"></span>
							<div id="picBox" class="picBox">
								<ul class="cf">
								{loop $pictureurls $r}
									<li>
										<a href="#" target="_blank"><img src="{$r[url]}" alt="{$r[alt]" /></a>
									</li>
								{/loop}
								</ul>
							</div>
							<div class="blackbox">

								<div id="listBox" class="listBox">
									<ul class="cf">
									{loop $pictureurls $key $r}
										<li {if $key==0}class="on"{/if}><i class="arr2">	</i><img src="{$r[url]}" alt="{$r[alt]}" /></li>
									{/loop}
									</ul>
								</div>
							</div>
						</div>
					</div>
					<script type="text/javascript">
						(function() {
							function G(s) {
								return document.getElementById(s);
							}

							function getStyle(obj, attr) {
								if(obj.currentStyle) {
									return obj.currentStyle[attr];
								} else {
									return getComputedStyle(obj, true)[attr];
								}
							}

							function Animate(obj, json) {
								if(obj.timer) {
									clearInterval(obj.timer);
								}
								obj.timer = setInterval(function() {
									for(var attr in json) {
										var iCur = parseInt(getStyle(obj, attr));
										iCur = iCur ? iCur : 0;
										var iSpeed = (json[attr] - iCur) / 4;
										iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
										obj.style[attr] = iCur + iSpeed + 'px';
										if(iCur == json[attr]) {
											clearInterval(obj.timer);
										}
									}
								}, 30);
							}

							var oPic = G("picBox");
							var oList = G("listBox");

							var oPrev = G("prev");
							var oNext = G("next");
							var oPrevTop = G("prevTop");
							var oNextTop = G("nextTop");

							var oPicLi = oPic.getElementsByTagName("li");
							var oListLi = oList.getElementsByTagName("li");
							var len1 = oPicLi.length;
							var len2 = oListLi.length;

							var oPicUl = oPic.getElementsByTagName("ul")[0];
							var oListUl = oList.getElementsByTagName("ul")[0];
							var w1 = oPicLi[0].offsetWidth;
							var w2 = oListLi[0].offsetWidth;

							oPicUl.style.width = w1 * len1 + "px";
							oListUl.style.width = w2 * len2 + "px";

							var index = 0;

							var num = 4;
							var num2 = Math.ceil(num / 1);

							function Change() {

								Animate(oPicUl, {
									left: -index * w1
								});

								if(index < num2) {
									Animate(oListUl, {
										left: 0
									});
								} else if(index + num2 <= len2) {
									Animate(oListUl, {
										left: -(index - num2 + 1) * w2
									});
								} else {
									Animate(oListUl, {
										left: -(len2 - num) * w2
									});
								}

								for(var i = 0; i < len2; i++) {
									oListLi[i].className = "";
									if(i == index) {
										oListLi[i].className = "on";
									}
								}
							}

							oNextTop.onclick = oNext.onclick = function() {
								index++;
								index = index == len2 ? 0 : index;
								Change();
							}

							oPrevTop.onclick = oPrev.onclick = function() {
								index--;
								index = index == -1 ? len2 - 1 : index;
								Change();
							}

							for(var i = 0; i < len2; i++) {
								oListLi[i].index = i;
								oListLi[i].onclick = function() {
									index = this.index;
									Change();
								}
							}
						})()
					</script>
					<!-- 图片轮播代码 结束 -->
				</div>
				<!-- 模特介绍 幻灯轮播结束 -->

				<!-- 模特介绍 开始 -->
				<div class="modelzx clear">
					{$picture[description]}

					<ul class="updownZX">
						<li>
						{if $pre}
							<a href="/index.php?m=contest&c=index&a=imageshow&id={$pre[id]}&catid={$catid}"> 【上一篇】: {$pre[title]}</a>
						{else}
							<a href="javascript:;"> 【上一篇】: 没有了</a>
						{/if}
						</li>
						<li>
						{if $next}
							<a href="/index.php?m=contest&c=index&a=imageshow&id={$next[id]}&catid={$catid}"> 【下一篇】: {$next[title]}</a>
						{else}
							<a href="javascript:;"> 【下一篇】: 没有了</a>
						{/if}
						</li>
					</ul>
				</div>

			</div>
				<!--轮播内容页面结束-->			
		</div>	
		
		{template "contest","footer"}
		
		<script type="text/javascript">
			var swiper1 = new Swiper('.swiper-container.banner-lc', {
				pagination: '.swiper-pagination.banner-lc-page',
				paginationClickable: true,
				autoplay: 3000,
				speed: 2000
			});

			var swiper3 = new Swiper('.swiper-container.dualswiper', {
				pagination: '.swiper-pagination.banner-lc-page',
				autoplay: 1000,
				speed: 2000,
				slidesPerView: '2',
				prevButton: '.swiper-button-prev',
				nextButton: '.swiper-button-next',
				loop: true
			});
			Caroursel.init($('.caroursel'));
		</script>

		
	</body>

</html>